<template>
	<div id="piao">
		<div class="main">
			<div class="header">
				<div class="left">
					<div class="context">
						日期: <select name="date" @click="open">
							<option value="1">2022年08月09日-08月15日</option>
						</select>
						影片制式：<select name="zhi" id=""  @click="open">
							<option value="1">全部</option>
						</select>
						影片属性：<select name="shu" id=""  @click="open">
							<option value="1">全部</option>
						</select>
						影片主类型：<select name="lei" id=""  @click="open">
							<option value="1">全部</option>
						</select>
						地区：<select name="area" id=""  @click="open">
							<option value="1">请选择</option>
						</select>

					</div>
				</div>
				<div class="right">
					<input type="checkbox">服务费
					<button>查询</button>
				</div>
			</div>
			<div class="container">
				<div class="top">
					<span :class="{'active':num==1}" @click="num=1;getDateChange()">票房</span>
					<span :class="{'active':num==2}" @click="num=2;getDateChange()">场次</span>
					<span :class="{'active':num==3}" @click="num=3;getDateChange()">人次</span>
				</div>
				<div class="main-biao">
					<div class="shang">
						<div style="width:100%;height: 500px;" class="biao1" ></div>
					</div>
					<div class="center">
						<Bing :num="num"></Bing>

					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		GetBigDate,
	} from '@/api/my.js'
	import Bing from "@/components/BingView.vue"
	export default {
		components: {
			Bing
		},
		data() {
			return {
				total: {},
				xlist: '',
				ylist: '',
				num: 1,

			}
		},
		created() {

			this.getDateChange()

		},
		methods: {

			open() {
				const h = this.$createElement;
				this.$msgbox({
					title: '功能使用受限',
					message: h('p', "该功能仅限于尊贵的vip！！很显然你不是", [
						h('span',  ''),
						h('i', {
							style: 'color: red'
						}, 'VNode')
					]),
					showCancelButton: true,
					confirmButtonText: '开通VIP',
					cancelButtonText: '取消',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							instance.confirmButtonLoading = true;
							instance.confirmButtonText = '开通中';
							setTimeout(() => {
								done();
								setTimeout(() => {
									instance.confirmButtonLoading = false;
								}, 300);
							}, 3000);
						} else {
							done();
						}
					}
				}).then(() => {
					this.$message({
						type: 'info',
						message: '你个穷B你也配'
					});
				});
			},

			getDateChange() {
				GetBigDate({
					'r': "0.6790471833060048",
					'datetype': "Day",
					'date': "2022-08-09,2022-08-15",
					'sdate': "2022-08-09",
					'edate': "2022-08-15",
					'bserviceprice': "1"
				}).then(res => {
					this.total = res.data.data
					let xlist = [],
						ylist = []
					if (this.num == 1) {
						for (let i in this.total.table0) {
							xlist.push(this.total.table0[i].InsertDate)
							ylist.push((this.total.table0[i].BoxOffice / 100000000) * 1)
							// console.log(this.total.table0[i].BoxOffice);
						}
					} else if (this.num == 2) {
						for (let i in this.total.table0) {
							xlist.push(this.total.table0[i].InsertDate)
							ylist.push((this.total.table0[i].ShowCount / 10000) * 1)
							// console.log(this.total.table0[i].BoxOffice);
						}
					} else {
						for (let i in this.total.table0) {
							xlist.push(this.total.table0[i].InsertDate)
							ylist.push((this.total.table0[i].AudienceCount / 10000) * 1)
							// console.log(this.total.table0[i].BoxOffice);
						}
					}
					this.initCharts(xlist, ylist)
				})
			},
			initCharts(xlist, ylist) {

				let myChart = this.$echarts.init(document.querySelector(".biao1"));
				myChart.setOption({
					xAxis: {
						type: 'category',
						data: xlist,
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: ylist,
						type: 'line',
						smooth: true
					}]
				})
			}
		},
		mounted() {

		}
	}
</script>

<style scoped>
	.active {
		background-color: #7030a0;
		color: white;
	}

	#piao {
		background-color: #E5E5E5;



	}

	.main {
		margin: 20px !important;
		color: #454555;
		font-size: 13px;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px !important;
		background: #fff;
		box-shadow: 0 0 8px rgb(0 25 141 / 12%);
		border-radius: 2px;
		margin-bottom: 20px;
	}

	.container {
		padding-top: 20px;
		background: #fff;
		box-shadow: 0 0 8px rgb(0 25 141 / 12%);
		border-radius: 2px;
		margin-bottom: 20px;
	}

	.header .left {
		color: #454555;
		font-size: 13px;
	}

	.container .top::before {
		height: 20px;
		display: block;
	}
.container .top{
	padding: 0 20px;
}
	.container .top>span {
		border: 1px solid gray;
		padding: 3px 10px;
		display: inline-block;
		cursor: pointer;
	}

</style>
